<template>
    <div :class="randomClass" style="height: 100%; width: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
    props: {
        type: {
            type: String,
            default: 'count' // 'count' 或 'rate'
        },
        qualified: {
            type: Number,
            default: 0
        },
        unqualified: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            randomClass: "chart-" + Math.random().toString(36).substring(7),
            chart: null
        };
    },
    watch: {
        type: 'drawChart',
        qualified: 'drawChart',
        unqualified: 'drawChart'
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        getOptions() {
            if (this.type === 'count') {
                return {
                    color: ["#3398DB"],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "line",
                            lineStyle: { opacity: 0 },
                        },
                        formatter: params => {
                            return `${params[0].axisValue}：${params[0].data}`;
                        }
                    },
                    grid: {
                        left: "0%",
                        right: "0%",
                        bottom: "5%",
                        top: "7%",
                        height: "85%",
                        containLabel: true,
                        z: 22,
                    },
                    xAxis: [
                        {
                            type: "category",
                            gridIndex: 0,
                            data: ['合格数', '不合格数'],
                            axisTick: { alignWithLabel: true },
                            axisLine: { lineStyle: { color: "#0c3b71" } },
                            axisLabel: { show: true, color: "#a8c0ec", fontSize: 16 },
                        },
                    ],
                    yAxis: [
                        {
                            type: "value",
                            gridIndex: 0,
                            splitLine: { show: false },
                            axisTick: { show: false },
                            min: 0,
                            max: Math.max(this.qualified, this.unqualified, 100),
                            axisLine: { lineStyle: { color: "#0c3b71" } },
                            axisLabel: { color: "#a8c0ec" },
                        },
                        {
                            type: "value",
                            gridIndex: 0,
                            min: 0,
                            max: Math.max(this.qualified, this.unqualified, 100),
                            splitNumber: 12,
                            splitLine: { show: false },
                            axisLine: { show: false },
                            axisTick: { show: false },
                            axisLabel: { show: false },
                        },
                    ],
                    series: [
                        {
                            name: "数量",
                            type: "bar",
                            barWidth: "37%",
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [7, 7, 0, 0],
                                    color: params => {
                                        const colors = [
                                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                { offset: 0, color: "#289501" },
                                                { offset: 0.5, color: "#22621b" },
                                                { offset: 1, color: "#132b14" },
                                            ]),
                                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                { offset: 0, color: "#c80809" },
                                                { offset: 0.5, color: "#8a0f11" },
                                                { offset: 1, color: "#3d0f13" },
                                            ]),
                                        ];
                                        return colors[params.dataIndex] || colors[0];
                                    },
                                },
                            },
                            data: [this.qualified, this.unqualified],
                            zlevel: 11,
                        },
                        {
                            name: "背景",
                            type: "bar",
                            barWidth: "50%",
                            xAxisIndex: 0,
                            yAxisIndex: 1,
                            barGap: "-120%",
                            data: [Math.max(this.qualified, this.unqualified, 100), Math.max(this.qualified, this.unqualified, 100)],
                            itemStyle: {
                                normal: {
                                    color: "rgba(26,40,67,0.6)",
                                    border: 2
                                },
                            },
                            zlevel: 9,
                        },
                    ],
                };
            } else {
                // rate
                return {
                    color: ["#3398DB"],
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "line",
                            lineStyle: { opacity: 0 },
                        },
                        formatter: params => {
                            return `${params[0].axisValue}：${params[0].data}%`;
                        }
                    },
                    grid: {
                        left: "0%",
                        right: "0%",
                        bottom: "5%",
                        top: "7%",
                        height: "85%",
                        containLabel: true,
                        z: 22,
                    },
                    xAxis: [
                        {
                            type: "category",
                            gridIndex: 0,
                            data: ['合格率', '不合格率'],
                            axisTick: { alignWithLabel: true },
                            axisLine: { lineStyle: { color: "#0c3b71" } },
                            axisLabel: { show: true, color: "#a8c0ec", fontSize: 16 },
                        },
                    ],
                    yAxis: [
                        {
                            type: "value",
                            gridIndex: 0,
                            splitLine: { show: false },
                            axisTick: { show: false },
                            min: 0,
                            max: 100,
                            axisLine: { lineStyle: { color: "#0c3b71" } },
                            axisLabel: { color: "#a8c0ec", formatter: "{value} %" },
                        },
                        {
                            type: "value",
                            gridIndex: 0,
                            min: 0,
                            max: 100,
                            splitNumber: 12,
                            splitLine: { show: false },
                            axisLine: { show: false },
                            axisTick: { show: false },
                            axisLabel: { show: false },
                        },
                    ],
                    series: [
                        {
                            name: "百分比",
                            type: "bar",
                            barWidth: "37%",
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [7, 7, 0, 0],
                                    color: params => {
                                        const colors = [
                                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                { offset: 0, color: "#289501" },
                                                { offset: 0.5, color: "#22621b" },
                                                { offset: 1, color: "#132b14" },
                                            ]),
                                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                { offset: 0, color: "#c80809" },
                                                { offset: 0.5, color: "#8a0f11" },
                                                { offset: 1, color: "#3d0f13" },
                                            ]),
                                        ];
                                        return colors[params.dataIndex] || colors[0];
                                    },
                                },
                            },
                            data: [this.qualified, this.unqualified],
                            zlevel: 11,
                        },
                        {
                            name: "背景",
                            type: "bar",
                            barWidth: "50%",
                            xAxisIndex: 0,
                            yAxisIndex: 1,
                            barGap: "-120%",
                            data: [100, 100],
                            itemStyle: {
                                normal: {
                                    color: "rgba(26,40,67,0.6)",
                                    border: 2
                                },
                            },
                            zlevel: 9,
                        },
                    ],
                };
            }
        },
        drawChart() {
            this.$nextTick(() => {
                const chartDom = document.querySelector('.' + this.randomClass);
                if (!chartDom) return;
                if (!this.chart) {
                    this.chart = echarts.init(chartDom);
                }
                this.chart.setOption(this.getOptions(), true);
            });
        }
    }
};
</script>

<style scoped></style>    